import { useState, useEffect } from 'react';
import { useParams, Outlet, useNavigate, useLocation } from 'react-router-dom';
import { Menu, Row, Col, Breadcrumb } from 'antd';
import {
  CalendarOutlined,
  BookOutlined,
  NotificationOutlined,
  FileSearchOutlined,
  StopOutlined,
  HomeOutlined,
  UserOutlined,
} from '@ant-design/icons';

const { SubMenu } = Menu;

const Hospital = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const [currentKey, setCurrentKey] = useState('registration');

  let { hoscode } = useParams();

  const handleClick = ({ key }) => {
    setCurrentKey(key);
    navigate(`/hospital/${key}/${hoscode}`);
  };

  useEffect(() => {
    if (location.pathname.indexOf('registration') !== -1) {
      setCurrentKey('registration');
    } else if (location.pathname.indexOf('detail') !== -1) {
      setCurrentKey('detail');
    } else if (location.pathname.indexOf('notice') !== -1) {
      setCurrentKey('notice');
    } else if (location.pathname.indexOf('suspend') !== -1) {
      setCurrentKey('suspend');
    } else if (location.pathname.indexOf('query') !== -1) {
      setCurrentKey('query');
    } else if (location.pathname.indexOf('schedule') !== -1) {
      setCurrentKey('registration');
    } else if (location.pathname.indexOf('booking') !== -1) {
      setCurrentKey('registration');
    }
  }, [location]);

  const gotoHome = () => {
    navigate(`/`);
  };

  return (
    <div className='content-container'>
      <div className='content'>
        <Breadcrumb className='m-20'>
          <Breadcrumb.Item onClick={gotoHome}>
            <HomeOutlined />
          </Breadcrumb.Item>
          <Breadcrumb.Item>医院信息</Breadcrumb.Item>
        </Breadcrumb>
        <Row>
          <Col span={4}>
            <Menu
              selectedKeys={currentKey}
              style={{ width: '100%' }}
              mode='vertical'
              onClick={handleClick}
            >
              <Menu.Item icon={<CalendarOutlined />} key='registration'>
                预约挂号
              </Menu.Item>
              <Menu.Item icon={<BookOutlined />} key='detail'>
                医院详情
              </Menu.Item>
              <Menu.Item icon={<NotificationOutlined />} key='notice'>
                预约须知
              </Menu.Item>
              <Menu.Item icon={<StopOutlined />} key='suspend'>
                停诊信息
              </Menu.Item>
              <Menu.Item icon={<FileSearchOutlined />} key='query'>
                查询/取消
              </Menu.Item>
            </Menu>
          </Col>
          <Col span={20}>
            <Outlet />
          </Col>
        </Row>
      </div>
    </div>
  );
};

export default Hospital;
